<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%	/*
		作用相当生成了以下路径：
		path=WebName ; (当前站点名称)
			例如：
				basePath= http://localhost:8080/WebName/

		这样的好处在于可以为当前jsp页面中的href添加前缀-->bssePath字符串
	*/
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>register</title>
    <!-- plugins:css -->
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="/image/static/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="/image/static/css/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="/image/static/css/style.css">
    <style>
<%--        设置登录框样式--%>
        .card {
            width: 430px;
            height: 437px;
            border-radius: 4.25rem;
            background-color: #847c873d;
        }
        .card .card-title1{
            font-size: 35px;
            font-weight: 500;
            text-align: right;
            color: #ca3e3e;
        }
        .form-group1{
            width: 366px;
            height: 50px;
        }
        .form-group1 input{
            width: 418px;
            height: 45px;
            font-size: 20px;
            background-color: #847c873d;
        }
        .form-group1 input:focus{
            background-color: #847c873d;
            border-color: black;
        }
        .form-check .form-check-label input {
            width: 18px;
            height: 18px;
            opacity: 1;
        }
        .text-center{
            font-size: 28px;
        }
        .btn-primary{
            background-color: #655fba;
        }
        input::placeholder {
            font-size: 18px; /* 设置你想要的字体大小 */
        }
        .auth button {
            font-size: 2.0rem;
        }
        .btn.btn-lg{
            font-size: 2.0rem;
        }
        /*//获取验证码按钮样式设置*/
        #btn11{
            margin-left: 10px;
            width: 150px;
            height: 45px;
            color: #655fba;
            background-color: #847c873d;
        }
        #code{
            width: 268px;
            height: 45px;
        }
    </style>
    <!-- End layout styles -->
    <script type="text/javascript" src="/jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">

        $(function (){
            //给邮箱获取验证码按钮添加单击事件
            $("#btn11").click(function (){
                $.ajax({
                    url:'/sendEmailByRegister',
                    data:{
                        email:$("#email").val(),
                    },
                    type:'post',
                    dataType:'json',
                    success: function (data) {
                        console.log(data);
                        if (data.code == "1") {
                            //跳转到业务主页面
                            alert("验证码发送成功");
                        } else {
                            //提示信息
                           alert("验证码发送失败");
                        }
                    }
                })
            })

            //给注册按钮添加单击事件
            $("#registerBtn").click(function () {
                // 获取表单数据
                var name = $.trim($("#name").val());
                var loginAct = $.trim($("#loginAct").val());
                var loginPwd = $.trim($("#loginPwd").val());
                var loginPwd2 = $.trim($("#loginPwd2").val());
                var email = $.trim($("#email").val());
                var authCode = $.trim($("#authCode").val());

                console.log(name)
                console.log(loginAct)
                console.log(loginPwd)
                console.log(loginPwd2)
                console.log(authCode)

                if (!name || !loginAct || !loginPwd || !email || !authCode) {
                    alert("请填写完整注册信息！");
                    return;
                }
                if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
                    alert("请输入有效的邮箱地址！");
                    return;
                }
                if (loginPwd !== loginPwd2) {
                    alert("两次输入的密码不一致");
                    $("#loginPwd2").focus();
                    return;
                }
                // 发送注册请求
                $.ajax({
                    url: 'user/register',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        name: name,
                        loginAct: loginAct,
                        loginPwd: loginPwd,
                        email: email,
                        authCode: authCode
                    },
                    success: function(response) {
                        if (response.code === "1") {
                            alert(response.message);
                            // 跳转到登录页面
                            window.location.href = "/settings/qx/user/toLogin.do";
                        } else {
                            alert("注册失败：" + response.message);
                        }
                    },
                });
            })
            //点击登录按钮跳转登录页面
            $("#loginBtn").click(function(){
                window.location.href = "/settings/qx/user/toLogin.do";
            });
        });
    </script>

    <script>
        // let btn = document.querySelector('#'); // 获取元素
        var btn = $('#btn11'); // 获取元素
        let num = 60;  // 初始化值
        let timer;  // 定义timer变量
        function fun() {
            btn.disabled = true; // 点击后禁用按钮避免重复点击
            num = 60; // 重置计数器
            clearInterval(timer); // 清除可能存在的旧定时器
            timer = setInterval(function () {
                num--;
                btn.innerHTML = `${num}秒后重新获取`;
                if (num <= 0) {
                    btn.innerHTML = '获取验证码';
                    btn.disabled = false; // 启用按钮
                    clearInterval(timer); // 清除定时器
                }
            }, 1000); // 每隔1000毫秒(即1秒)执行一次
        }
    </script>
</head>
<body>

<div class="container-scroller" >
    <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="row w-100 m-0">
            <div class="content-wrapper full-page-wrapper d-flex align-items-center auth login-bg">
                <div class="card col-lg-4 mx-auto">
                    <div class="card-body px-5 py-5" style="line-height: 30px" >
                        <h3 class="card-title1 text-center mb-3">客户管理系统</h3>
                        <form >
                            <div class="form-group1">
                                <input type="text" id="name" name="name" class="form-control"  placeholder="名称" required>
                            </div>
                            <div class="form-group1">
                                <input type="text" id="loginAct" name="loginAct" class="form-control" placeholder="用户名" required>
                            </div>
                            <div class="form-group1">
                                <input type="email" id="email" name="email" class="form-control" placeholder="邮箱" required>
                            </div>
                            <div class="form-group1" >
                                <div class="text-center" style="width: 260px;height: 45px;float: left;">
                                    <input id="authCode" type="text" name="authCode"  class="form-control" placeholder="邮箱验证码" required>
                                </div>
                                <div class="text-center" style="width: 100px;height: 45px;float: left;">
                                    <button id="btn11" onclick="fun()">获取验证码</button>
                                </div>
                            </div>
                            <div class="form-group1">
                                <input type="password" id="loginPwd" name="loginPwd" class="form-control" placeholder="密码" required>
                            </div>
                            <div class="form-group1">
                                <input type="password" id="loginPwd2" class="form-control" placeholder="确认密码" required>
                            </div>

                            <div class="text-center denglu" style="width: 418px;height: 45px;">
                                <div class="text-center1" style="width: 180px;height: 45px;float: left;margin-left: 20px;">
                                    <button type="button" id="registerBtn" class="btn btn-primary btn-lg" style="width: 180px;height: 45px;">立即注册</button>
                                </div>
                                <div class="text-center1" style="width: 180px;height: 45px;float: left;margin-left: 10px">
                                    <button type="button" id="loginBtn" class="btn btn-primary btn-block enter-btn" >去登录</button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- content-wrapper ends -->
        </div>
        <!-- row ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>



</body>
</html>